﻿Ext.namespace('iOS.App.Notes');

Ext.define('NotesContent', {
    extend : 'BaseView',

    statics : {
        ViewCls        : 'notes-content',
        EdgeTop        : 'notes-edge-top',
        BodyParent     : 'notes-body-parent',
        ContentBody    : 'notes-content-body',
        ContentDate    : 'notes-content-date',
        ContentText    : 'notes-content-text',
        ContentEdit    : 'notes-content-edit',
        ContentShower  : 'notes-content-shower',
        ContentBottom  : 'notes-content-bottom',
        NotesBottom    : 'notes-bottom',
        BottomLeftBtn  : 'notes-bottom-leftBtn',
        BottomMailBtn  : 'notes-bottom-mailBtn',
        BottomGrabage  : 'notes-bottom-grabage',
        BottomRightBtn : 'notes-bottom-rightBtn',
        BottomBtnShelter:'notes-bottom-btnShelter'
    },

    _eventList: [
        ['beginEdit'],
        ['finishEdit']
    ],

    _isEditing: false,

    _attachEventListener: function(){
        this.callParent();
        var sttc     = this.self,
            that     = this,
            $el      = this.getElCacheByCls(sttc.ContentBody),
            config   = {
                direction  : 'vertical',
                bounces    : 'vertical'
            };
        $.scrollView($el.get(0), config);
        this.getElCacheByCls(sttc.ContentBody).
            on('rangeclick', function(){
                iOS.ViewManager.notify(that, 'beginEdit');
            });
        this.getElCacheByCls(sttc.NotesBottom).
            on($.support.mousedown, function(){
                that.showBtnShelter(this);
            }).on($.support.mouseup, function(){
                setTimeout(function(){
                    that.hideBtnShelter();    
                }, 200);
            });
    },

    _initInnerDom: function(){
        var sttc     = this.self,
            htmlData = [
                '<div class="',sttc.EdgeTop,'">',
                '</div>',
                '<div class="',sttc.BodyParent,'">',
                    '<div class="',sttc.ContentBody,'">',
                        '<div class="ios-space" style="',this._getFlex(11),'">',
                        '</div>',
                        '<div class="',sttc.ContentDate,'">',
                            '<span style="',this._getTranslate(33, 0),'">今天',
                            '</span>',
                            '<span style="',this._getTranslate(205, 0),'">5月11日',
                            '</span>',
                            '<span style="',this._getTranslate(275, 0),'">12:00',
                            '</span>',
                        '</div>',
                        '<div class="',sttc.ContentText,'">',
                            '<div class="',sttc.ContentShower,'">',
                                'test测试',
                            '</div>',
                            '<textarea class="',sttc.ContentEdit,'">',
                            '</textarea>',
                        '</div>',
                    '</div>',
                '</div>',
                '<div class="',sttc.ContentBottom,'">',
                    '<div class="',sttc.BottomLeftBtn,' ',sttc.NotesBottom,'">',
                    '</div>',
                    '<div class="',sttc.BottomMailBtn,' ',sttc.NotesBottom,'">',
                    '</div>',
                    '<div class="',sttc.BottomGrabage,' ',sttc.NotesBottom,'">',
                    '</div>',
                    '<div class="',sttc.BottomRightBtn,' ',sttc.NotesBottom,'">',
                    '</div>',
                    '<div class="',sttc.BottomBtnShelter,' ',sttc.NotesBottom,'">',
                    '</div>',
                '</div>'
            ];
        this.getElCache().append(htmlData.join(''));
    },

    beginEdit: function(){
        if(this._isEditing){
            return false;
        }
        var sttc     = this.self,
            shower   = this.getElCacheByCls(sttc.ContentShower),
            textarea = this.getElCacheByCls(sttc.ContentEdit),
            content  = shower.text(); 
        shower.hide();
        textarea.val(content).css('display', 'block').focus();
        this.setRange(textarea[0], content.length);
        this._isEditing = true;
    },

    finishEdit: function(){
        if(!this._isEditing){
            return false;
        }
        var sttc       = this.self,
            shower     = this.getElCacheByCls(sttc.ContentShower),
            textarea   = this.getElCacheByCls(sttc.ContentEdit),
            content    = textarea.val();
        shower.text(content).show();
        textarea.hide();
        this._isEditing = false;
    },

    showBtnShelter: function(el){
        var $el        = $(el),
            sttc       = this.self,
            btnShelter = this.getElCacheByCls(this.self.BottomBtnShelter),
            cls        = ($el.attr('class').split(' '))[0],
            btnPos     = this.getTranslate($el),
            shelterPos = {},
            disPos     = {};
        if(cls == sttc.BottomLeftBtn || cls == sttc.BottomRightBtn){
            disPos     = {
                x : 9,
                y : 10    
            };
        } else if(cls == sttc.BottomMailBtn){
            disPos     = {
                x : 6,
                y : 10
            };
        } else if(cls == sttc.BottomGrabage){
            disPos     = {
                x : 10,
                y : 5
            };
        }
        shelterPos     = {
            x : btnPos.x - disPos.x,
            y : btnPos.y - disPos.y
        };
        btnShelter.cssTranslate(shelterPos.x, shelterPos.y).show();
    },

    changeContent: function(index){
        var sttc      = this.self,
            conShower = this.getElCacheByCls(sttc.ContentShower),
            content;
        conShower.text(content); 
    },

    hideBtnShelter: function(){
        this.getElCacheByCls(this.self.BottomBtnShelter).hide();
    },

    /*
     * 设置光标位置
     * @ta，目标元素
     * pos，要插入的位置
     */
    setRange: function(tar, pos){
        if(document.selection){  
            var range = tar.createTextRange();  
            range.moveEnd('character', -tar.value.length);           
            range.moveEnd('character', pos);  
            range.moveStart('character', pos);  
            range.select();  
        }else{  
            tar.setSelectionRange(pos, pos);  
        }
    }

});

iOS.App.Notes.NotesContent = NotesContent;